<template>
  <div class="peosonResultListBox main w" style="background-color:#fff">
    <p class="peosonResultTitle">评价系统 - 人员管理</p>
    <div class="block">
      <!-- 新增人员 -->
      <div class="addBtnBox" style>
        <div class="item">
          <el-button type="success" @click="showAddDialog(addForm)" icon="el-icon-plus">新增人员</el-button>
        </div>
      </div>
      <div class="switchResultBox">
        <!-- 名字搜索 -->
        <div class="selectDepBox">
          <div class="selectTitleName selectTitle">搜索姓名 :</div>
          <div class="inputSuffix" style="float: left; margin-right:8px;">
            <el-input
              class="input-with-select"
              v-model="personName"
              placeholder="请输入姓名"
              @change="handleNameChange"
              clearable
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
        <!-- 部门选择 -->
        <div class="selectDepBox">
          <span class="selectTitle">选择部门 :</span>
          <span>
            <el-select
              v-model="departmentName"
              clearable
              value-key="depid"
              placeholder="请选择部门"
              @change="handleDeparentChange"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.depid"
                :label="item.name"
                :value="item.depid"
              ></el-option>
            </el-select>
          </span>
        </div>
        <!-- 超级管理 -->
        <div class="selectDepBox">
          <span class="selectTitle" style="display:inline-block;">超级管理:</span>
          <span class="switchBox">
            <el-select v-model="seeResult" placeholder="请选择" @change="handleSeeResultChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
      <!-- 列表主体 -->
      <el-table :data="employeeList" border class="adminTable" :header-cell-style="elementStyleObj">
        <el-table-column type="index" label="序号" width="50" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="departmentName"
          label="所属部门"
          width="170"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="120" header-align="center" align="center"></el-table-column>
        <el-table-column prop="eid" label="工号" width="100" header-align="center" align="center"></el-table-column>
        <el-table-column prop="role" label="职责" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="seeResult"
          label="超级管理"
          width="60"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="employeeList[scope.$index].seeResult == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="角色" width="90" header-align="center" align="center">
          <template slot-scope="scope">
            <template v-if="employeeList[scope.$index].title == 1">
              <span>正职</span>
            </template>
            <template v-if="employeeList[scope.$index].title == 2">
              <span>副职</span>
            </template>
            <template v-if="employeeList[scope.$index].title == 3">
              <span>普通教师</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="midLevRepresent"
          label="中层干部"
          width="60"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="employeeList[scope.$index].midLevRepresent == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeUnionRepresent"
          label="教工代表"
          width="60"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="employeeList[scope.$index].tradeUnionRepresent == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="编 辑"
          filter-placement="bottom-end"
          width="160"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showEditPerson(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button size="mini" type="danger" @click="deletePerson(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="paginationBox">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="listCount"
          v-if="listCount != 0"
        ></el-pagination>
      </div>
      <!-- 弹窗组件 -->
      <el-dialog title="新增人员" :visible.sync="addState" size="small" @close="closeDialog">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="130px"
          v-loading="addLoading"
          size="mini"
        >
          <el-form-item label="部门名称" prop="departmentId">
            <el-select v-model="addForm.departmentId" placeholder="请选择部门名称">
              <el-option
                v-for="item in departmentList"
                :key="item.depid"
                :label="item.name"
                :value="item.depid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-autocomplete
              v-model="addFormName"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入姓名"
              @select="handleSelect"
              clearable
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="教职工号" prop="eid">
            <el-input v-model="addForm.eid"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="priority">
            <el-input v-model="addForm.priority" placeholder="部门员工列表中排序优先级：数字越大，排序越靠前"></el-input>
          </el-form-item>
          <el-form-item label="职责" prop="role">
            <el-input type="textarea" v-model="addForm.role"></el-input>
          </el-form-item>
          <el-form-item label="是否超级管理" prop="seeResult">
            <el-switch v-model="addForm.seeResult"></el-switch>
          </el-form-item>
          <el-form-item label="是否中层干部" prop="midLevRepresent">
            <el-switch v-model="addForm.midLevRepresent"></el-switch>
          </el-form-item>
          <el-form-item label="是否教工代表" prop="tradeUnionRepresent">
            <el-switch v-model="addForm.tradeUnionRepresent "></el-switch>
          </el-form-item>
          <el-form-item label="是否参与统计" prop="statistic">
            <el-switch v-model="addForm.statistic "></el-switch>
          </el-form-item>
          <el-form-item label="是否被评价" prop="isEvaluated">
            <el-switch v-model="addForm.isEvaluated "></el-switch>
          </el-form-item>
          <el-form-item label="部门职务" prop="title">
            <el-radio-group v-model="addForm.title">
              <el-radio label="1">正职</el-radio>
              <el-radio label="2">副职</el-radio>
              <el-radio label="3">普通教师</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="addState = false">取 消</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
            <el-button type="primary" @click="addPerson(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑人员" :visible.sync="editState" size="small" @close="closeDialog">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="130px"
          v-loading="addLoading"
        >
          <el-form-item label="部门名称" prop="departmentId">
            <el-select v-model="addForm.departmentId" placeholder="请选择部门名称">
              <el-option
                v-for="item in departmentList"
                :key="item.depid"
                :label="item.name"
                :value="item.depid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="教职工号" prop="eid">
            <el-input v-model="addForm.eid"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="priority">
            <el-input v-model="addForm.priority" placeholder="部门员工列表中排序优先级：数字越大，排序越靠前"></el-input>
          </el-form-item>
          <el-form-item label="职责" prop="role">
            <el-input type="textarea" v-model="addForm.role"></el-input>
          </el-form-item>
          <el-form-item label="是否超级管理" prop="seeResult">
            <el-switch v-model="addForm.seeResult"></el-switch>
          </el-form-item>
          <el-form-item label="是否中层干部" prop="midLevRepresent">
            <el-switch v-model="addForm.midLevRepresent"></el-switch>
          </el-form-item>
          <el-form-item label="是否教工代表" prop="tradeUnionRepresent">
            <el-switch v-model="addForm.tradeUnionRepresent "></el-switch>
          </el-form-item>
          <el-form-item label="是否参与统计" prop="statistic">
            <el-switch v-model="addForm.statistic "></el-switch>
          </el-form-item>
          <el-form-item label="是否被评价" prop="isEvaluated">
            <el-switch v-model="addForm.isEvaluated "></el-switch>
          </el-form-item>
          <el-form-item label="部门职务" prop="title">
            <el-radio-group v-model="addForm.title">
              <el-radio label="1">正职</el-radio>
              <el-radio label="2">副职</el-radio>
              <el-radio label="3">普通教师</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelEditPerson">取 消</el-button>
            <el-button type="primary" @click="editPerson(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped>
.adminTable {
  font-family: "Microsoft" !important;
  width: 96%;
  margin: 10px 2% 30px;
  -webkit-box-shadow: 0px 6px 14px #e8e8e8;
  box-shadow: 0px 6px 14px #e8e8e8;
  cursor: pointer;
}
.paginationBox {
  margin: 0px 3% 50px;
}
.switchResultBox {
  padding-left: 3%;
}
.selectTitleName {
  float: left;
  line-height: 36px;
}
</style>
<script>
export default {
  name: "adminTime",
  data() {
    return {
      //是否超级管理员
      options: [
        {
          value: "",
          label: "查看全部"
        },
        {
          value: true,
          label: "是"
        },
        {
          value: false,
          label: "否"
        }
      ],
      //element 表头样式
      elementStyleObj: {
        background: "rgb(245, 249, 255) ",
        fontSize: "17px",
        color: "#434343"
      },
      seeResult: "", //超级管理员
      personName: "", //用户姓名
      currentPage: 1, //分页
      listCount: 0, //总条数
      departmentList: [], //部门列表
      departmentName: "", //部门name
      departmentId: "", //部门ID
      departmentData: {}, //选中的值
      employeeList: [], //表格数据
      addState: false, //新增弹窗状态
      editState: false, //编辑弹窗
      addLoading: false, //懒加载
      restaurants: [],
      timeout: null,
      addFormName: "", //输入值
      // 新增
      addForm: {
        departmentId: "", //部门id
        eid: "", //教工号
        midLevRepresent: false, //是否中层干部
        name: "", //姓名
        origin: 1, //添加来源 1统一添加，2管理系统，3微信企业号 ,
        role: "", //工作职责
        seeResult: false, //是否超级管理员
        statistic: true, //用户是否参与统计
        isEvaluated: false, //是否参与被评价
        title: "3", //用户角色:1正职 2副职 3普通教师 ,
        priority: "0", //部门员工列表中排序优先级：数字越大，排序越靠前 ,
        tradeUnionRepresent: "false" //是否教工代表
      },
      // 表单验证
      rules: {
        departmentId: [
          { required: true, message: "请选择部门", trigger: "change" }
        ],
        // name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        eid: [
          { required: true, message: "请输入教职工号", trigger: "change" }
          // { type: 'number', message: '教职工号必须为数字值'}
        ],
        role: [{ required: true, message: "请输入职责", trigger: "change" }],
        priority: [{ required: true, message: "请输入排序", trigger: "change" }]
      }
    };
  },
  created() {
    this.currentPage = this.getContextData("currentPage") || 1; //本地取当前页
    this.seeResult = this.getContextData("seeResult") || ""; //是否超级管理员
    this.departmentId = this.getContextData("departmentId") || ""; //部门id
    this.departmentName = this.getContextData("departmentName") || ""; //部门名字
    this.getEmployeeList(); //获取用户列表
    this.getListCount(); //分页条数
    this.getDepartmentList(); //参评部门列表
  },
  mounted() {},
  methods: {
    //移除;
    deletePerson(index, data) {
      // console.log("index",index, "data",data);
      let uesId = data.id; //获取当前用id
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const url = `api/management/employee/delete?id=${uesId}`;
          this.axios.get(url).then(response => {
            if (response.data.code == 0) {
              this.listCount = response.data;
              this.$message({
                showClose: false,
                message: "删除成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.getEmployeeList(); //重新加载列表
            } else {
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
            }
          });
        })
        .catch(() => {});
    },
    // 显示编辑页面
    showEditPerson(index, data) {
      this.editState = true; //打开编辑弹窗
      this.addForm = data; //页面
    },
    // 取消编辑页面
    cancelEditPerson() {
      this.editState = false;
    },
    // 监听关闭弹窗时重新加载数据
    closeDialog() {
      this.getEmployeeList(); //重新获取用户列表
      this.getListCount(); //分页总条数
    },
    // // 编辑完提交
    editPerson() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          const url = "api/management/employee/update";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "修改成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.editState = false;
              this.getEmployeeList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
    // 显示添加窗口
    showAddDialog(addForm) {
      this.addState = true;
    },
    // // 新增人员
    addPerson(addForm) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          const url = "api/management/employee/insert";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "添加成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.addState = false;
              this.getEmployeeList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
    //queryString 为在框中输入的值
    //callback 回调函数,将处理好的数据推回
    querySearchAsync(queryString, callback) {
      // console.log("输入值", this.addFormName);
      var list = [{}];
      //调用的后台接口
      const url = `api/management/employee/listSystemEmployee?searchName=${
        this.addFormName
      }`;
      //从后台获取到对象数组
      this.axios
        .post(url)
        .then(response => {
          //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
          for (let i of response.data) {
            i.value = i.employeeName + " ( " + i.employeeId + " )"; //将想要展示的数据作为value
          }
          list = response.data;
          callback(list);
        })
        .catch(error => {
          console.log(error);
        });
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        callback(list);
      }, 3000 * Math.random());
    },
    // 选中的人
    handleSelect(item) {
      this.addForm.name = item.employeeName;
      this.addForm.eid = item.employeeId;
    },
    // 是否超级管理员选项
    handleSeeResultChange(value) {
      this.seeResult = value;
      this.setContextData("seeResult", this.seeResult);
      let pageVal = 1; //页码等于1
      this.handleCurrentChange(pageVal); //调用当前页码
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //搜索名字
    handleNameChange(val) {
      this.personName = val;
      let pageVal = 1; //页码等于1
      this.handleCurrentChange(pageVal); //调用当前页码
    },
    //选择部门
    handleDeparentChange(depId) {
      this.departmentId = depId;
      this.departmentData = this.departmentList.find(item => {
        return item.depid === depId; //筛选出匹配数据
      });
      this.setContextData("departmentName", this.departmentData.name);
      this.setContextData("departmentId", this.departmentId);
      let pageVal = 1; //页码等于1
      this.handleCurrentChange(pageVal); //调用当前页码
    },
    // 分页当前页
    handleCurrentChange(pageVal) {
      this.currentPage = pageVal;
      this.setContextData("currentPage", this.currentPage);
      this.getEmployeeList(); //加载人员列表
      this.getListCount(); //列表总条数
    },
    //获取列表总条数
    getListCount() {
      const url = `api/management/employee/listCount?departmentId=${
        this.departmentId
      }&employeeName=${this.personName}&seeResult=${
        this.seeResult
      }&currentPage=${this.currentPage}&pageSize=20`;
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.listCount = response.data;
          // console.log("人员总条数", this.listCount);
        }
      });
    },
    //获取评价人员列表
    getEmployeeList() {
      const url = `api/management/employee/list?departmentId=${
        this.departmentId
      }&employeeName=${this.personName}&seeResult=${
        this.seeResult
      }&currentPage=${this.currentPage}&pageSize=20`;
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.employeeList = response.data.data;
          // console.log("人员列表", this.employeeList);
        }
      });
    },
    //获取评价部门列表
    getDepartmentList() {
      const url = `api/management/employee/listDepartment`;
      this.axios.post(url).then(response => {
        if (response.data != null) {
          let depList = response.data;
          //模拟全部部门选项
          let allDep = {
            name: "查看所有部门",
            depid: ""
          };
          depList.unshift(allDep);
          this.departmentList = depList;
          // console.log("人员参评部门列表", this.departmentList);
        }
      });
    },
    //给sessionStorage存值
    setContextData: function(key, value) {
      if (typeof value == "string") {
        sessionStorage.setItem(key, value);
      } else {
        sessionStorage.setItem(key, JSON.stringify(value));
      }
    },
    // 从sessionStorage取值
    getContextData: function(key) {
      const str = sessionStorage.getItem(key);
      if (typeof str == "string") {
        try {
          return JSON.parse(str);
        } catch (e) {
          return str;
        }
      }
      return;
    }
  }
};
</script>
